You can display website sub-navigation in a hierarchical format with a few changes to your theme’s master page and skin file.
To implement hierarchical sub-navigation
1. Define how many levels of navigation to display.
□ From Site designer > Manage websites, edit the website displaying the hierarchical sub-navigation.
□ Select the Navigation Areas tab, then click the edit icon for the navigation areas.
□ Select Secondary.
□ Edit the value for the Dynamic Display Levels to define how many levels of navigation can be displayed.
□ Save and publish your changes.
2. Edit the website theme’s master page.
□ Using your preferred text editor, find and open the website theme’s master page. Master pages, by default, are located in C:\Program Files\ASI\iMIS15\Net\Templates\MasterPages.
□ Register the control by adding the following line to the top of the master page, just below the other registered controls:
<%@ Register TagPrefix="asi" TagName="SubNavigation" Src="~/AsiCommon/Controls/Navigation/SubNavigation.ascx" %>
□ Add the following scripts to the <script language="C#" runat="server"> section:
protected override SiteMapNode GetStartingNode()
{
return Secondary.GetStartingNode();
}
protected override SiteMapNode GetCurrentNode()
{
return Secondary.GetCurrentNode();
}
□ Find the masterSideBarPanel div. It should look like this:
<div id="masterSideBarPanel" class="yui-b">
<asp:ContentPlaceHolder ID="SideBarPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</div>
□ Update the masterSideBarPanel div so that it contains the following:
<div id="masterSideBarPanel" class="yui-b">
<asp:Panel ID="SubNavPanel" runat="server" >
<asp:ContentPlaceHolder ID="PageSubNavigationPlaceHolder" runat="server">
<asp:Panel id="SubNavHead" runat="server" class="SubNavigationHead">
<asp:Literal ID="SubNavPanelTitle" runat="server" />
</asp:Panel>
<asp:Panel id="SubNavBody" runat="server" class="SubNavigationBody">
<asi:SubNavigation id="Secondary" runat="server" NavigationPaneCode="2"
StartingNodeOffset="1" StartFromCurrentNode="true"
StartingNodeOffsetAutoSet="true" SelectDefaultNode="false" />
</asp:Panel>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="SideBarPlaceHolder" runat="server" />
</asp:Panel>
</div>
□ Find the masterWrapper div, and add the yui-t2 class to it:
<div id="masterWrapper" class=”yui-t2”>
□ To improve JavaScript performance for websites using hierarchical sub-navigation, find the following script:
<script type="text/javascript">
// if there is something in the side bar this converts the layout to 2 columns
if ($('masterSideBarPanel').children.length != 0) {
$('masterWrapper').setAttribute("class", "yui-t2 HasSubNav");
}
</script>
□ Update that script to the following:
<script type="text/javascript">
// if there is something in the side bar this converts the layout to 2 columns
if ($('masterSideBarPanel').children.length === 0) {
$('masterWrapper').removeAttribute("class");
}
</script>
3. Edit the website theme’s skin file.
□ Using your preferred text editor, find and open the website theme’s skin file (for example Aspen.skin). Skin files, by default, are located in C:\Program Files\ASI\iMIS15\Net\App_Themes.
□ Register the control by adding the following line to the top of the skin file, just below the other registered controls:
<%@ Register TagPrefix="asi" TagName="SubNavigation" Src="~/AsiCommon/Controls/Navigation/SubNavigation.ascx" %>
□ Just below the section registering controls, add the following line:
<asi:SubNavigation runat="server" Skin="Aspen" EnableEmbeddedSkins="false" SingleExpandPath="true" ShowLineImages="false" />
□ If you are familiar with skin controls, you can configure how the SubNavigation control behaves using the following properties:
■ string NavTreeSkinId – A unique ID for the skin if needed. The default is RadTreeView.
■ bool SingleExpandPath – Gets or sets a value indicating if only the current branch of the tree is expanded. The SingleExpandPath property, when set to True, automatically collapses nodes that are not on the path of the currently expanded node. Use the SingleExpandPath property when you need to conserve screen space and make navigating nodes easier.
■ public bool ShowLineImages – Gets or sets a value indicating if the tree node line images display or not.
■ string Width – Gets or sets width of the control. Specify in pixels (px) or percentage (%) e.g. 500px, 90%.
■ bool EnableEmbeddedSkins – Gets or sets a value indicating if the built in skins should be used on the navigation tree.
■ int MaxDataBindDepth – Gets or sets the maximum number of levels to bind to the navigation tree.
■ bool WrapNodeText – Gets or sets the option to wrap text if it is wider than the trees allowed width.
■ bool ExpandAllNodes – Gets or sets the option to expand all of the nodes when the navigation tree renders.